<template>
  <h2>Page - {{ $store.state.counter }}</h2>
  <button @click="$store.commit('increase')">+1</button>
  <button @click="$store.commit('decrease')">-1</button>
  <button @click="addN">+n</button>
  <button @click="increase">mapMutations +1</button>
  <button @click="decrease">mapMutations -1</button>
</template>

<script>
import { mapMutations } from 'vuex'
import { M_CONSTANT } from '../store/mutation-types'
export default {
  methods: {
    addN() {
      this.$store.commit('increaseN', { n: 10 })
      this.$store.commit({ type: 'increaseN', n: 10 })
      this.$store.commit({ type: M_CONSTANT, name: 'nolan', age: 18 })
    }
  },
  setup(){
    const mutationFns = mapMutations(['increase', 'decrease'])
    return {
      ...mutationFns
    }
  }
}
</script>

<style scoped></style>
